<template>
	<view class="pop-box-bg" :animation="animationData2" :style="{paddingTop:contentTop + 'px'}" @click="close">
		<view class="pop-content" :animation="animationData" @click.stop="">
			<image :src="modal_image" mode="widthFix"></image>
		</view>
		<view class="pop-box-close" @click="close">
			<image src="/static/img/close.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				animationData:{},
				animationData2:{},
				userInfo:{
					avatar:'',
					nickname:'',
					phone:''
				}
			}
		},
		props:{
			contentTop:{
				type:Number,
				default:0
			},
			modal_image:{
				type:String,
				default:''
			}
		},
		mounted() {
			this.init()
		},
		methods:{
			init(){
				this.openAni()
			},
			close(){
				this.openAni(1)
				setTimeout(()=>{
					this.$emit('close')
				},300)
			},
			openAni(type) {
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
				var animation2 = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease',
				})
			
				this.animation = animation
				this.animation2 = animation2
			
				animation.scale(type ? .2 : 1).step()
				animation2.opacity(type ? 0 : 1).step()
				this.animationData = animation.export()
				this.animationData2 = animation2.export()
			}
		}
	}
</script>

<style>
	.pop-box-bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .3);opacity: 0;display: flex;flex-direction: column; justify-content: center;align-items: center}
	.pop-content{width: 610rpx;background-color: white;border-radius: 20rpx;transform: scale(.2);overflow: hidden;min-height: 610rpx;max-height: 1000rpx;}
		.pop-content image {vertical-align: bottom;}
/* 	.pop-money-btn{width: 600rpx;margin: 50rpx auto;border-radius: 50rpx;height: 80rpx;line-height: 80rpx;text-align: center;background-color: red;color: white;transition: all .3s;} */
/* 弹出信息 */
.content-info{padding: 0 40rpx;}
.content-info:first-child{margin-top: 40rpx;}
.content-info:not(:first-child){margin-bottom: 40rpx;}
.content-info-avater{text-align: center;}
.content-info-avater image {width: 80rpx;height: 80rpx;}
.info-avater-btn{font-size: 24rpx}
.content-input-btn,.content-money-btn {background-color: #f2f2f2;padding: 0 20rpx;border-radius: 20rpx;}
.content-input-btn input{line-height: 100rpx;height: 100rpx;text-align: center;}
/* 关闭按钮 */
.content-money-btn{height: 100rpx;line-height: 100rpx;background-color: black;color: white;text-align: center;border-radius: 100rpx;}
.pop-box-close{padding: 40rpx 0;}
.pop-box-close image{width: 80rpx;height: 80rpx;}
</style>